<template>
  <view class="pageHeight wh_750 bg_F5F5F5 flex align-center flex-column">
    <s-header-title title="目录管理"
                    is-fixed
                    background="#FFFFFF"
                    is-display-back
                    z-index="99"
                    @getPageHeight="getPageHeight"
    ></s-header-title>
    <view :style="{height:`${page.pageHeight}px`}"></view>
    <view class="fs_24 color_9F9F9F fw_500 mt_20 mb_20">
      可长按右侧图标拖动排序
    </view>
    <l-drag :list="page.directoryList"
            :column="1"
            gridHeight="100rpx"
            longpress
            @change="canonizationChange($event)"
            @touchStart="canonizationTouchStart($event)"
    >
      <template #grid="{active, index, content}">
        <view class="flex align-center justify-center hW_100">
          <view class="wh_702 bg_FFFFFF hW_80 flex align-center justify-between"
                style="border-radius: 8rpx"
          >
            <view class="ml_22 fs_30 color_4B4B4B fw_500">{{ content.title }}</view>
            <view class="mr_22">
              <image class="wh_27 hW_27 mr_40"
                     :src="`${IMG_URL}/index/book_list_edit.png`"
                     @click.stop="openAddPopup(content)"
                     v-if="content.is_lock_delete != 1"
              ></image>
              <image class="wh_27 hW_27" :src="`${IMG_URL}/index/family_sort.png`"></image>
            </view>
          </view>
        </view>
      </template>
    </l-drag>
    <view class="hW_150"></view>
    <view class="bottomButton wh_470 hW_80 bg_FF4206 fs_30 fw_500 color_FFFFFF flex align-center justify-center"
          style="border-radius: 41rpx"
          @click.stop="sheep.$router.go('/pages/canonization/addCatalogue',{id:page.options.id})"
    >
      添加目录
    </view>

    <uni-popup ref="addPopup">
      <view class="wh_574 hW_566 bg_FFFFFF flex flex-column align-center"
            style="border-radius: 24rpx;overflow: hidden;">
        <view class="wh_574 hW_115 bg_FFF8E8 flex align-center justify-between">
          <view class="ml_16">编辑目录</view>
          <image class="wh_32 hW_32 mr_43"
                 :src="`${IMG_URL}/index/jiatingjizhangben_icon_close.png`"
                 @click.stop="closePopup"
          ></image>
        </view>
        <view class="hW_88"></view>
        <view class="wh_501 hW_80 flex align-center justify-center bg_F8F8F8"
              style="border-radius: 40rpx;overflow: hidden;">
          <input class="basicInformation_input" :focus="page.catalogueFocus" type="text" v-model="page.catalogueName"
                 placeholder="请输入目录名称"
                 placeholder-class="placeholder"
                 @blur="page.catalogueFocus = false"
          ></input>
        </view>
        <view class="hW_88"></view>
        <view class="wh_296 hW_60 bg_FF4206 fs_30 fw_500 color_FFFFFF flex align-center justify-center"
              style="border-radius: 40rpx;"
              @click.stop="updateCatalogue"
        >
          确定
        </view>
        <view class="hW_30"></view>
        <view class="flex align-center" @click.stop="closeCanonization">
          <image :src="`${IMG_URL}/index/canonization_del.png`" class="wh_30 hW_33"></image>
          <view class="color_969696 fs_30 fw_500 ml_4">删除目录</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
  import { reactive, computed, ref } from 'vue';
  import { onLoad, onShow } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import LDrag from '@/uni_modules/lime-drag/components/l-drag/l-drag.vue';

  const page = reactive({
    options: {},
    pageHeight: 0,
    // 目录列表
    directoryList: [],
    // 选中的目录信息
    selectedDirectory: null,
    catalogueFocus: false,
    catalogueName: '',
  });
  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);
  const addPopup = ref();

  onLoad((options) => {
    page.options = options;
  });

  onShow(() => {
    getBookSysImageList();
  });

  function getPageHeight(height) {
    page.pageHeight = height;
  }

  // 获取册谱目录列表
  async function getBookSysImageList() {
    const { data } = await sheep.$api.book_list.getCateList({
      genealogy_id: page.options.id,
    });
    page.directoryList = data;
  }

  function openAddPopup(info) {
    page.selectedDirectory = info;
    if (!!page.catalogueFocus) {
      page.catalogueFocus = false;
    }
    addPopup.value.open();
    page.catalogueName = info.title;
    setTimeout(() => {
      page.catalogueFocus = true;
    }, 100);
  }

  function closePopup() {
    addPopup.value.close();
  }

  async function updateCatalogue() {
    console.log(page.selectedDirectory);
    const { code, msg } = await sheep.$api.book_list.updateCate({
      cate_id: page.selectedDirectory.id,
      title: page.catalogueName,
    });
    if (code == 1) {
      await getBookSysImageList();
      uni.$emit('getCanonizationDetail')
      closePopup();
    } else {
      sheep.$helper.toast(msg);
    }
  }

  function closeCanonization() {
    uni.showModal({
      title: '删除目录',
      content: '确认删除该目录吗？',
      success: function(res) {
        if (res.confirm) {
          sheep.$api.book_list.deleteCate({
            cate_id: page.selectedDirectory.id,
          }).then(res => {
            if (res.code == 1) {
              getBookSysImageList();
              uni.$emit('getCanonizationDetail')
              closePopup();
            } else {
              sheep.$helper.toast(res.msg);
            }
          });
        }
      },
    });
  }

  function canonizationTouchStart(e) {
    page.selectedDirectory = e;
  }

  async function canonizationChange(e) {
    console.log(e);
    let arr = [];
    e.forEach(item => {
      arr.push(item.content.id);
    });
    const { code, msg } = await sheep.$api.book_list.updateCateWeigh({
      ids: arr.join(','),
      genealogy_id: page.options.id,
    });
    if (code != 1) {
      sheep.$helper.toast(msg);
    }else{
      uni.$emit('getCanonizationDetail')
    }
  }
</script>


<style scoped lang="scss">
  .bottomButton {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 50rpx;
    z-index: 99;
  }

  .placeholder {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 36rpx;
    color: #4E4E4E;
    text-align: center;
  }

  .basicInformation_input {
    width: 470rpx;
    font-size: 36rpx;
    font-weight: 500;
    color: #4b4b4b;

    :deep(.uni-input-input) {
      text-align: center;
    }
  }
</style>
